<!--
 * @FilePath     : /vision/src/components/Template.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-24 16:25:19
 * @Description  :  模板
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->

<template>
    <div class="com-page">
        <div class="com-container">
            <div class="com-chart" ref="seller_ref"></div>
        </div>
    </div>
  </template>
  
  <script>
  import { throttle } from '@/utils';

  export default {
    /* eslint-disable */
    name: 'Tempalte',
    data() {
        return {
            // 图标实例
            chartInstance: null,
            // 服务器返回的所有数据
            allData: null,
            // 当前显示的页数
            currentPage: 1,
            // 定时器标识
            timerId: null,
            // 记录监听事件，用于取消事件
            throttledAdaptScreen: null
        }
    },
    async mounted() {
        this.initChart();
        await this.getData();
        this.adaptScreen();
        this.throttledAdaptScreen = throttle(this.adaptScreen, 100)
        window.addEventListener('resize', this.throttledAdaptScreen);
    },
    destroyed() {
        clearInterval(this.timerId);
        window.removeEventListener('resize', this.throttledAdaptScreen)
    },
    methods: {
        // 初始化表格
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')
            const initOption = {
               
            }
            this.chartInstance.setOption(initOption)
            // 绑定事件,鼠标移入时，关闭定时器
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            })
            // 鼠标移除时，打开定时器
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取数据
        async getData() {
            // const {data} = await this.$http.get('http://127.0.0.1:8888/api/seller')
            // this.allData = data;
            // 渲染数据
            this.updateChart()
        },
        // 更新表格
        updateChart() {
            const dataOption = {
            }
            this.chartInstance.setOption(dataOption)
        },
        // 根据屏幕尺寸，将图标适配屏幕
        adaptScreen() {
            const adaptOption = {
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        }
    }
  }
  </script>
  
  <style scoped lang='less'>

  </style>
  